<template>
	<view class="home">
		<!-- 		<u-sticky offset-top="0">
			<view class="tophead">
				<uni-icons type="left" color="#666" size="26" @click="retFn"></uni-icons>
				<view class="">
					浮标法测流
				</view>
				<view class="" style="width: 100rpx;display: flex;justify-content: flex-end;align-items: center;">
					<view class="" style="margin-right: 20rpx;">
						<uni-icons type="gear-filled" color="#000000" size="26" @click="allocationFn"></uni-icons>
					</view>
				</view>
			</view>
		</u-sticky> -->
		<u-navbar title="浮标法测流" :leftIconSize="24" :bgColor="bgColor" rightIcon="question-circle" :autoBack="true"
			:placeholder="true" safeAreaInsetTop>
			<view class="u-nav-slot" slot="right" @click="allocationFn">
				<u-icon name="order" color="#000" size="28"></u-icon>
			</view>
		</u-navbar>
		<view class="title">
			{{title}}
		</view>
		<view class="tabs_monitor">

			<view class="yuanq">

			</view>
			<view class="tabs_tx">
				水深：
			</view>
			<view class="tabs_inp">
				<u--input@change="changeinput" type="digit" placeholder="请输入内容" border="surround"
					v-model="velocityData.depthOfWater" :fontSize="fontSize" :color="color"></u--input>
			</view>
			<view class="tabs_xx">
				m
			</view>
		</view>
		<view class="tabs_monitor">
			<view class="yuanq">

			</view>
			<view class="tabs_tx">
				测距：
			</view>
			<view class="tabs_inp">
				<u--input @change="changeinput" type="digit" placeholder="请输入内容" border="surround"
					v-model="velocityData.lengthMeasurement" :fontSize="fontSize" :color="color"></u--input>
			</view>
			<view class="tabs_xx">
				m
			</view>
		</view>
		<view class="tabs_monitor">
			<view class="yuanq">

			</view>
			<view class="tabs_tx">
				时长：
			</view>
			<view class="tabs_inp">
				<u--input @change="changeinput" type="digit" placeholder="请输入内容" border="surround"
					v-model="velocityData.takeTime" :fontSize="fontSize" :color="color"></u--input>
			</view>
			<view class="tabs_xx">
				s
			</view>
		</view>
		<view class="tabs_monitor">
			<view class="yuanq">

			</view>
			<view class="tabs_tx">
				浮标系数：
			</view>
			<view class="tabs_inp">
				<u--input @change="changeinput" type="digit" placeholder="请输入内容" border="surround"
					v-model="velocityData.coefficient" :fontSize="fontSize" :color="color"></u--input>
			</view>
			<view class="tabs_xx">

			</view>
		</view>
		<view class="tabs_monitor">
			<view class="yuanq">

			</view>
			<view class="tabs_tx">
				水面流速：
			</view>
			<view class="tabs_inp">
				{{velocityData.surfaceVelocity}}
			</view>
			<view class="tabs_xx">
				m/s
			</view>
		</view>
		<view class="tabs_monitor">
			<view class="yuanq">

			</view>
			<view class="tabs_tx">
				平均流速：
			</view>
			<view class="tabs_inp">
				{{velocityData.meanVelocity}}
			</view>
			<view class="tabs_xx">
				m/s
			</view>
		</view>
		<view class="tabs_monitor">
			<view class="yuanq">

			</view>
			<view class="tabs_tx">
				流量：
			</view>
			<view class="tabs_inp">
				{{velocityData.flowRate}}
			</view>
			<view class="tabs_xx">
				m³/s
			</view>
		</view>
		<!-- <button @click="trigonometricFunction">函数</button> -->
		<view class="container">
			<AppleStyleStopwatch @watchTime="watchTime" @resetTime="resetTime" @continueTime="continueTime" />
		</view>
		<view class="buttbox">
			<u-button class="custom-style" type="primary" text="上传数据" @click="uploadDataFn(1)"
				:showCancelButton="true"></u-button>
			<u-button class="custom-style" type="success" text="保存数据" @click="uploadDataFn(0)"
				:showCancelButton="true"></u-button>
		</view>
		<u-modal :show="showUploa" :title="titleuploa" :asyncClose="true" :showCancelButton="true"
			@confirm="confirmUpload" @cancel="cancelUpload"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import AppleStyleStopwatch from '@/components/AppleStyleStopwatch.vue'
	export default {
		components: {
			AppleStyleStopwatch
		},
		data() {
			return {
				bgColor: '#f2f1f6',
				message: '123456789',
				titleuploa: '是否上传数据',
				showUploa: false,
				fontSize: '23px',
				color: '#2978de',
				velocityData: {
					depthOfWater: 0, //水深
					lengthMeasurement: 20, //测长
					takeTime: 0, //用时
					coefficient: 0.9, //系数
					surfaceVelocity: 0, //水面流速
					meanVelocity: 0, //平均流速
					flowRate: 0, //流量
				},

				toolName: '计时计数器',
				lSA: 0, //左坡角
				rSA: 0, //右坡角
				title: '',
				qudikuandu: 0, //测长
				celiangfangshi: null, //测量方式
				measurementType: '', //测量设备方式
				reportType: null, //上报类型

			}
		},
		onLoad(option) {
			this.dataFormat()
		},
		methods: {
			// 上传数据
			uploadDataFn(e) {
				this.reportType = e
				this.showUploa = true

				console.log("点击上传");
			},
			// 确认
			confirmUpload() {
				this.measurePIAOFUFn()
				this.showUploa = false
			},
			// 取消
			cancelUpload() {
				this.reportType = null
				this.showUploa = false
			},
			// 历史记录
			allocationFn() {
				uni.navigateTo({
					url: '/pages/manualFlowMeasurement/historyOfPiaofu'
				});
			},
			// 上传
			measurePIAOFUFn() {
				let ceVue = this.vuex_cezhanInfo
				let obj = {}
				if (ceVue.type == 0) {
					obj = {
						depthofwater: this.velocityData.depthOfWater * 1, //水深
						lengthmeasurement: this.velocityData.lengthMeasurement * 1, //测长
						taketime: this.velocityData.takeTime * 1, //用时
						coefficient: this.velocityData.coefficient * 1, //系数
						gspName: this.title, //名称
						flowrate: this.velocityData.flowRate * 1, //流量
						ssId: ceVue.ssId, // 测站/灌溉站id
						sfsId: ceVue.sfsId, //测段id
						gspId: ceVue.id, //断面参数id
						reportType: this.reportType //上报类型
					}
				}
				if (ceVue.type == 1) {
					obj = {
						depthofwater: this.velocityData.depthOfWater * 1, //水深
						lengthmeasurement: this.velocityData.lengthMeasurement * 1, //测长
						taketime: this.velocityData.takeTime * 1, //用时
						coefficient: this.velocityData.coefficient * 1, //系数
						gspName: this.title, //名称
						flowrate: this.velocityData.flowRate * 1, //流量
						ssId: ceVue.ssId, // 测站/灌溉站id
						fmpId: ceVue.fmpId, //计量点
						gspId: ceVue.id, //断面参数id
						reportType: this.reportType //上报类型
					}
				}
				if (this.velocityData.flowRate == 0 || this.velocityData.flowRate == '') {
					uni.showToast({
						title: '数据不完整',
						icon: 'error',
						duration: 2000
					});
					return
				}
				uni.$u.http.post('/device/floatingCurrentRecording/add', obj).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							duration: 1500
						});
					} else {
						this.toastFn(res.msg)
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			toastFn(data) {
				this.$refs.uToast.show({
					type: "error",
					message: data,
				})
			},
			// 开始时间
			watchTime(e) {
				this.velocityData.takeTime = e
				//计算流速
				this.calculatedVelocity()
				console.log('时间', e);
			},
			// 继续
			continueTime() {
				console.log('继续');
			},
			//复位时间
			resetTime() {
				this.velocityData.takeTime = 0
				//计算流速
				// this.calculatedVelocity()
				console.log('复位时间');
			},
			changeinput() {
				//计算流速
				this.calculatedVelocity()
				console.log('触发input');
			},
			//计算流速
			calculatedVelocity() {
				this.velocityData.surfaceVelocity = (this.velocityData.lengthMeasurement * 1 / this.velocityData.takeTime *
					1).toFixed(3)
				this.velocityData.meanVelocity = (this.velocityData.surfaceVelocity * this.velocityData.coefficient)
					.toFixed(3)
				console.log('水面流速', this.velocityData.surfaceVelocity);
				console.log('平均流速', this.velocityData.meanVelocity);
				this.trigonometricFunction(this.velocityData.meanVelocity)
			},
			// 计算三角函数 边
			trigonometricFunction(data) {
				let edgeLL = 90 - this.lSA * 1
				let edgeRR = 90 - this.rSA * 1
				// 左坡角面积
				let areaLL = this.calculateOppositeSide(edgeLL, this.velocityData.depthOfWater * 1) * this.velocityData
					.depthOfWater / 2
				// 右坡角面积
				let areaRR = this.calculateOppositeSide(edgeRR, this.velocityData.depthOfWater * 1) * this.velocityData
					.depthOfWater / 2
				// 矩形面积
				let rectangularArea = this.velocityData.depthOfWater * 1 * this.qudikuandu * 1
				// 总面积
				let grossArea = areaLL + areaRR + rectangularArea
				this.velocityData.flowRate = (data * grossArea).toFixed(3)



				console.log('---', areaLL, areaRR, rectangularArea, grossArea);
			},
			// 处理数据格式
			dataFormat() {
				let obj = this.vuex_cezhanInfo
				let elect = {}
				if (this.toolName == '单轨测流车') {
					elect = obj.duopuleche
					elect.cexianlist = obj.duopuleche.cexianList
				}
				if (this.toolName == '索道式测流车') {
					elect = obj.suodaoche
					elect.cexianlist = obj.suodaoche.cexianList
				}
				if (this.toolName == '轨道式测流车') {
					elect = obj.guidaoche
					elect.cexianlist = obj.guidaoche.cexianList
				}
				if (this.toolName == '计时计数器') {
					elect = obj.celiugan
					elect.cexianlist = obj.celiugan.cexianList
				}
				this.qudikuandu = elect.qudikuandu
				this.lSA = elect.lSA
				this.rSA = elect.rSA
				this.title = obj.name
				console.log('选择测量仪器', this.toolName);
				console.log('原始数据', obj);
				console.log('格式化数据', elect);
			},
			// 三角函数
			calculateOppositeSide(angleDegrees, adjacentSide) {
				const angleRadians = angleDegrees * Math.PI / 180;
				const oppositeSide = adjacentSide * Math.tan(angleRadians);
				return oppositeSide;
			},
			retFn() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.tophead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 20rpx 10rpx 20rpx;
		color: #000000;
		background-color: #f3f3f3;
	}

	.title {
		padding: 10;
		text-align: center;
		font-size: 50rpx;
		color: #2978de;
		// background-color: #000000;
	}

	// 水情
	.tabs_monitor {
		margin: 20rpx;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		font-size: 45rpx;
		display: flex;
		align-items: center;
		color: #000000;
		background-color: #ffffff;

		.yuanq {
			width: 10rpx;
			height: 50rpx;
			background-color: #f2f1f6;
			margin-right: 20rpx;
			border-radius: 50rpx;
		}

		.tabs_tx {
			width: 260rpx;
			text-align: justify;
			text-align-last: justify;
			// background-color: #aaffff;
		}

		.tabs_inp {
			width: 280rpx;
			font-size: 70rpx;
			margin-right: 30rpx;
			color: #2978de;
			display: flex;
			align-items: center;
			// background-color: #aaaaff;
		}

		.tabs_xx {
			// background-color: #ffe26c;
		}
	}

	// 上传
	.buttbox {
		padding: 20rpx;

		.custom-style {
			margin-bottom: 20rpx;
			border-radius: 30rpx;
		}
	}

	// 秒表
	.container {
		margin: 20rpx;
	}
</style>
<style>
	page {
		background-color: #f2f1f6;
	}
</style>